import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Tabs, Badge, List } from 'antd-mobile';
import InquiryList from 'components/inquiry';

const InquiryListPage = (props) => {
  const Number = props.list;
  let status3= Number.length;
  const filterMap = [];
  const filterMap1 = [];
  const filterMap2 = [];
  Number.forEach(Numbers => {
    if(Numbers.status == 1){
      filterMap.unshift(Numbers.status);
    }else if(Numbers.status == 2){
      filterMap1.unshift(Numbers.status);
    }else if(Numbers.status == 0){
      filterMap2.unshift(Numbers.status);
    }
  });
   const filter1 = filterMap.length;
   const filter2 = filterMap1.length;
   const filter0 = filterMap2.length;  
   const filters = [
    { status: 2, title: <List><Badge text={filter2} style={{background:'#9ACD32'}}>已完成</Badge></List> },
    { status: 0, title: <List><Badge text={filter0} style={{background:'#727171'}}>待填写</Badge></List> },
    { status: 1, title: <List><Badge text={filter1} style={{background:'orange'}}>已填写</Badge></List> },
    { status: -1,title: <List><Badge text={status3} style={{background:'red'}}>全部</Badge></List> }
  ];
  function filterHandler(tab) {
    let match = tab.status;
    props.dispatch({
      type: 'inquiry/fetch',
      payload: match,
    });
  }
  return (
    <Tabs onChange={(tab) => filterHandler(tab)} tabs={filters}>
      {filters.map(filter =>
        <div key>
          <InquiryList {...props} filters={filters} myfilter={filter}/>
        </div>
      )}
    </Tabs>
  );
};

const mapStateToProps = (state) => {
  const { list } = state.inquiry;
  const badge = state.account.badge;
  return {
    list,
    badge,
  };
};

export default connect(mapStateToProps)(InquiryListPage);
